<template>
    <div class="scene">
        <div class="view">
            <image src="@/static/qqq.jpg" mode="aspectFill" class="img"> </image>
            <div class="userinfo">
                <view class="userinfo-avatar">
                    <!-- <open-data type='userAvatarUrl'></open-data> -->
                    <image style="width: 100rpx; height: 100rpx" :src=" wxuserinfo[0].mr_avatar" mode="scaleToFill"
                        v-if="wxuserinfo[0].avatar == null">
                    </image>
                    <image style="width: 100rpx; height: 100rpx" :src="avatarUrl" mode="scaleToFill"
                        v-if="wxuserinfo[0].avatar != null">
                    </image>
                </view>
                <view class="userinfo-NickName">
                    <!-- <open-data type='userNickName'></open-data> -->
                    <text style="font-size: 35rpx;font-weight: bold;" v-if="wxuserinfo[0].nickName == null"> {{
                        wxuserinfo[0].mr_nickName
                    }}
                    </text>
                    <text style="font-size: 35rpx;font-weight: bold;" v-if="wxuserinfo[0].nickName != null"> {{
                        wxuserinfo[0].nickName }} </text>
                </view>
                <span style="float: right; margin: -56rpx 0rpx 0rpx 145rpx">
                    <van-button round color="#f3b576" size="small" @click="tx">
                        <span style="color: black;">更换头像</span>
                    </van-button>
                </span>
            </div>
            <van-popup :show="show" round position="bottom" custom-style="height: 40%">
                <view style="padding: 50rpx">
                    <!-- 标题 -->
                    <view class="popup_info">
                        <text class="ts1">获取昵称头像</text>
                        <text class="ts2">未选择头像则为默认头像</text>
                    </view>
                    <!-- 选择头像 -->
                    <view class="popup_info xztx">
                        <button open-type="chooseAvatar" @chooseavatar="onChooseavatar" type="default"
                            style="padding: 0; border: none;">
                            <view class="popup-avatar">
                                <image style="width: 80rpx; height: 80rpx" :src="avatarUrl">
                                </image>
                            </view>
                            <view class="popup-NickName"> 点击切换头像 </view>
                        </button>
                    </view>
                    <!-- 选择昵称 -->
                    <view class="popup_info xzmc">
                        <text class="mc1">昵称</text>
                        <input v-model="userName" type="nickname" placeholder="请输入昵称" class="mc2" @blur="bindblur" />
                    </view>
                    <!-- 按钮 -->
                    <view class="popup_btn">
 <!--                       <van-button type="default" style="margin: 20rpx;" color="#b1b1b1" round @click="qxtx">
                            <span style="padding: 0 20px;color: rgb(0, 0, 0);">取消</span>
                        </van-button> -->
                        <van-button type="default" style="margin: 20rpx;" color="#181818" round @click="qhtx">
                            <span style="padding: 0 20px;">确认</span>
                        </van-button>
                    </view>
                </view>
            </van-popup>

            <div class="card">
                <van-card>
                    <view slot="title">
                        <van-row>
                            <van-col span="24">
                                <span style="font-weight: bold; font-size: 20px">积分</span>
                            </van-col>
                        </van-row>
                        <van-row style="margin: 20rpx 0">
                            <van-col span="12">
                                <span style="
                    float: left;
                    font-weight: bold;
                    font-size: 20px;
                    line-height: 65rpx;
                  " v-if="list[0].integral">{{ list[0].integral }}</span>
                                <span style="
                    float: left;
                    font-weight: bold;
                    font-size: 20px;
                    line-height: 65rpx;
                  " v-if="!list[0].integral">0</span>
                            </van-col>
                            <van-col span="12">
                                <span style="float: right">
                                    <van-button round color="black" size="small" @click="jf">赚取积分</van-button>
                                </span>
                            </van-col>
                        </van-row>
                        <van-row>
                            <van-col span="24">
                                <div style="margin: 20rpx 0; border-bottom: 1px solid #c7c7c7"></div>
                            </van-col>
                        </van-row>
                        <van-row style="text-align: center; margin-bottom: 10rpx">
                            <van-col span="8">
                                <span style="font-weight: bold; font-size: 20px">0</span><br />
                                <span>比赛场数</span>
                            </van-col>
                            <van-col span="8">
                                <span style="font-weight: bold; font-size: 20px">0</span><br />
                                <span>比赛场数</span>
                            </van-col>
                            <van-col span="8">
                                <span style="font-weight: bold; font-size: 20px">0</span><br />
                                <span>比赛场数</span>
                            </van-col>
                        </van-row>
                        <div style="height: 80rpx; margin: 30rpx">
                            <image src="@/static/www.png" mode="aspectFill"
                                style="width: 100%; height: 100%; border-radius: 5px" @click="phb">
                            </image>
                        </div>
                    </view>
                </van-card>
            </div>
            <div class="card">
                <van-card>
                    <view slot="desc" style="margin-top: 50rpx">
                        <van-row style="text-align: center">
                            <van-col span="12">
                                <div style="height: 80rpx; width: 80rpx; float: left">
                                    <image src="@/static/z.png" mode="aspectFill"
                                        style="width: 100%; height: 100%; border-radius: 5px">
                                    </image>
                                </div>
                                <div style="margin-left: 13px; float: left">
                                    <span style="font-weight: bold; font-size: 16px" @click="test">我的赛事</span><br />
                                    <span style="font-size: 16rpx">Tomorrowls Yours</span>
                                </div>
                            </van-col>
                            <van-col span="12">
                                <div @click="myhd">
                                    <div style="height: 80rpx; width: 80rpx; float: left">
                                        <image src="@/static/x.png" mode="aspectFill"
                                            style="width: 100%; height: 100%; border-radius: 5px">
                                        </image>
                                    </div>
                                    <div style="margin-left: 13px; float: left">
                                        <span style="font-weight: bold; font-size: 16px">我的活动</span><br />
                                        <span style="font-size: 16rpx">只为尽兴</span>
                                    </div>
                                </div>
                            </van-col>
                        </van-row>
                    </view>
                </van-card>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [],
            wxuserinfo: [],
            userInfo: "",
            name: "",
            show: false,
            avatarUrl: "http://ydsports.test.upcdn.net/auto.jpg",
            userName: 'Salomon用户',
            tx_img: ''
        };
    },

    onShow() {
        this.checkAuth(); // 检查用户是否登录？在哪个钩子函数
        this.getusersign();  //个人积分数据
        this.getwxuserinfo()//微信个人信息
    },
    onLoad() { },
    methods: {
        onChooseavatar(e) {
            console.log('调用拍照等', e);
            let self = this;
            let {
                avatarUrl
            } = e.detail;
            console.log('图片地址', avatarUrl);
            this.avatarUrl = avatarUrl
        },
        bindblur(e) {
            this.userName = ''
            console.log('结束时', e.detail.value);
            this.userName = e.detail.value; // 获取微信昵称
        },
        //个人积分数据
        getusersign() {
            this.request({
                url: "/sign/list",
                method: "get",
            }).then((res) => {
                this.list = res.data.data;
                // console.log("个人积分数据", this.list[0].integral);
            });
        },
        getwxuserinfo() {
            this.request({
                url: "/wx_userinfo/userinfo",
                method: "get",
            }).then((res) => {
				console.log("头像",res.data)
                this.wxuserinfo = res.data.data;
                this.avatarUrl = this.wxuserinfo[0].avatar;
                this.userName = this.wxuserinfo[0].nickName;
                console.log("个人头像数据", this.wxuserinfo, this.wxuserinfo[0].nickName);
            });
        },
        myhd() {
            uni.navigateTo({
                url: "/packone/bm_activity/index",
            });
        },
        test() {
            console.log("asd");
            uni.navigateTo({
                url: "/packone/test/index",
            });
        },
        phb() {
            uni.navigateTo({
                url: "/packone/charts/index",
            });
        },
        jf() {
            uni.navigateTo({
                url: "/packone/sign/index",
            });
        },
        tx(info) {
            wx.hideTabBar()
            console.log("设置头像");
            this.show = true;
        },
        // qxtx() {
        //     this.show = false;
        //     wx.showTabBar()
        // },
        qhtx() {
            console.log('userName', this.userName);
            console.log('avatarUrl', this.avatarUrl);
            // console.log('tx', this.tx_img);
            wx.uploadFile({
                filePath: this.avatarUrl,
                name: 'img',
                url: 'http://127.0.0.1:8088/api/uploads',//服务器端接收图片的路径
                success: function (res) {
                    this.tx_img = JSON.parse(res.data).data
                    // this.tx_img = item.data
                    console.log('this.tx_img', this.tx_img);//发送成功回调
                    this.request({
                        url: "/wx_userinfo/update",
                        method: "post",
                        data: {
                            nickName: this.userName,
                            avatar: JSON.parse(res.data).data
                        }
                    }).then((res) => {
                        console.log(res,'获取头像');
                        this.show = false;
                        wx.showTabBar()
                        this.getwxuserinfo()//微信个人信息
						
    this.$forceUpdate();
                    });
                }.bind(this),
                fail: function (res) {
                    console.log(res);//发送失败回调，可以在这里了解失败原因
                    this.request({
                        url: "/wx_userinfo/update",
                        method: "post",
                        data: {
                            nickName: this.userName,
                            avatar: this.avatar
                        }
                    }).then((res) => {
                        console.log(res);
                        this.show = false;
                        wx.showTabBar()
                        this.getwxuserinfo()//微信个人信息
                    });
                }.bind(this)
            })
        },
    },
};
</script>

<style lang="scss" scoped>
.scene {
    background-color: rgb(241,241,241);
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
}

.img {
    width: 100%;
    height: 600rpx;
    mask: linear-gradient(360deg, transparent, #fff);
}

.userinfo {
    font-size: 14px;
    border-radius: 40%;
    position: absolute;
    top: 20%;
    left: 10%;
    width: 80%;
}

.userinfo-avatar {
    overflow: hidden;
    display: block;
    width: 100rpx;
    height: 100rpx;
    margin-top: 32rpx;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.popup-avatar {
    overflow: hidden;
    display: block;
    width: 80rpx;
    height: 80rpx;
    /* margin-top: 32rpx; */
    border-radius: 10rpx;
    /* border: 2px solid #fff; */
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    /* margin-bottom: 9rpx; */
}

.popup-NickName {
    margin: -77rpx 0rpx 0rpx 0rpx;
    color: rgb(0, 0, 0);
    font-size: 15px;
    line-height: 80rpx;
    width: 63%;
}

.userinfo-NickName {
    margin: -77rpx 0rpx 0rpx 145rpx;
    color: rgb(0, 0, 0);
    font-size: 20px;
}



.view {
    position: relative;
}

.card {
    position: relative;
    top: -240rpx;
    margin: 50rpx;
}

.card ::v-deep .van-card {
    border-radius: 10px !important;
}

.popup_info {
    min-height: 80rpx;
    margin: 21rpx 0;
}

.popup_btn {
    min-height: 80rpx;
    margin: 25rpx 0;
    text-align: center;
}

.xztx {
    width: 100%;
    display: block;
    border-bottom: 1px solid rgb(199, 198, 198);
    color: #fff;
    padding-bottom: 20rpx;

    button {
        background: #fff;
    }

    button::after {
        border: none;
    }
}

// .xztx button {
//     background: #fff;
// }

// .xztx button::after {
//     border: none;
// }

.xzmc {
    width: 100%;
    display: block;
    border-bottom: 1px solid rgb(199, 198, 198);
    padding-bottom: 20rpx;
}

.mc1 {
    line-height: 80rpx;
    float: left
}

.mc2 {
    margin-left: 50rpx;
    margin-top: 20rpx;
    float: left
}

.ts1 {
    font-weight: bold;
    font-size: 40rpx;
    display: block
}

.ts2 {
    font-size: 30rpx;
    padding-bottom: 20rpx;
    width: 100%;
    display: block;
    border-bottom: 1px solid rgb(199, 198, 198);
}
</style>
